import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import { dyCpsChannelProductCollect } from './service';

const TableList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [count, setCount] = useState<number>(0);
  const [amount, setAmount] = useState<number>(0);
  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */

  const columns: ProColumns<any>[] = [
    {
      title: '产品店铺',
      dataIndex: 'shopName',
      hideInSearch: true,
    },
    {
      title: '直播间',
      dataIndex: 'roomName',
      copyable: true,
    },
    {
      title: '后台比例',
      dataIndex: 'rate',
      hideInSearch: true,
      sorter: (a, b) => a.rate - b.rate,
      render: (amount) => {
        // 使用 toFixed(2) 保留两位小数
        return parseFloat(amount / 100).toFixed(2) + '%';
      },
    },

    {
      title: '订单数',
      dataIndex: 'orders',
      hideInSearch: true,
    },
    {
      title: '总付款金额',
      dataIndex: 'amount',
      hideInSearch: true,
      sorter: (a, b) => a.amount - b.amount,
      render: (amount) => {
        // 使用 toFixed(2) 保留两位小数
        return parseFloat(amount / 100).toFixed(2);
      },
    },
    {
      title: '预估佣金',
      dataIndex: 'commission',
      hideInSearch: true,
      render: (amount) => {
        // 使用 toFixed(2) 保留两位小数
        return parseFloat(amount / 100).toFixed(2);
      },
    },
    {
      title: '日期',
      dataIndex: 'date',
      valueType: 'date',
      hideInTable: true,
    },
  ];

  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
        headerTitle={'全部店铺-总支付金额：' + count + '&&预估佣金：' + amount}
        actionRef={actionRef}
        rowClassName={(record: any) => {
          if (record.proRate === 0 && record.amount !== 0) {
            return 'completed-row'; // 为状态为“已完成”的行添加样式
          }
          return '';
        }}
        rowKey="key"
        toolBarRender={() => []}
        request={async (params: any) => {
          const rsp = await dyCpsChannelProductCollect(params);
          if (rsp.code === 'SUCCESS') {
            setCount(rsp.data.count);
            setAmount(rsp.data.amount);
            return {
              data: rsp.data.list,
              total: rsp.data.total,
            };
          }
        }}
        columns={columns}
      />
    </PageContainer>
  );
};
export default TableList;
